<template>
	<view class="share" :style="{ 'background-image': `url(${bg})` }">
		<view class="title">
			<view class="bg" :class="title != '' ? 'bg-color' : ''">

				<u-icon @click="goBack" size="32" name="arrow-left"></u-icon>
				<text>{{title}}</text>
				<view class="">
				</view>
			</view>
		</view>
		<view class="modal-block" @click="Cancel" :style="{ 'background-image': `url(${url})` }">
			<view class="box">
				<view class="box-top">
					<view class="result">
						{{resultTitle}}
					</view>
					<view class="mark">
						{{score}}分
					</view>
					<view class="btn-box">
						<view class="btn-qu" @click="viewDetails">
							<text>查看得分详情</text>
							<u-icon size="32" color="#fff" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="exceed">
						超越了30%的人
					</view>
				</view>
			</view>
			<view class="hint">
				{{getHint}}
			</view>
		</view>
		<view class="btn-box">
			<view class="btn-qu" @click="onSaveCard">
				生成海报
			</view>
			<view class="btn">
				<view class="">
					让好友测一测
				</view>
				<button open-type="share">分享</button>
			</view>
		</view>


		<CreatePoster ref="CreatePoster" :url.sync="url" :resultTitle.sync="resultTitle" :getHint.sync="getHint" :score.sync="score"
			:posterData.sync="posterData" @previewImage="previewImage"></CreatePoster>
	</view>
</template>

<script>
	import CreatePoster from "../../components/CreatePoster.vue";
	// import { getDoctorQrCode, queryDoctorDetailById } from "@/service/api";
	// import initData from "@/mixins/initData";
	import config from "@/utils/config";
	import {
		getStore,
		base64src
	} from "@/utils";
	export default {

		onShareAppMessage(res) {
			return {
				title: '', // 分享的标题
				path: '/outpatient/survey/index', // 分享的页面路径
				imageUrl: '' // 分享的图片路径
			};
		},

		// mixins: [initData],
		components: {
			CreatePoster,
		},

		data() {
			return {
				score: 0,
				title: "测试结果",
				//背景大图
				bg: config.ossHost + '2025/01/02/f1a1521cd81a49ee87cf3adab5cd9f23.png',
				url: config.ossHost + '2025/01/15/2854be0fe4624c4f812d0357aaaf5659.png',
				loadingText: "正在生成二维码...",
				shareCode: {},
				hostUrls: config.ossHost,
				defaultImage: config.defaultDoctorIcon,
				deliveryFlag: false,
				resultTitle: "",
				getHint: "",
				// 名片模板数据
				posterData: {
					poster: {
						// 根据屏幕大小自动生成名片背景大小
						url: config.ossHost + '2025/01/15/2854be0fe4624c4f812d0357aaaf5659.png', // 图片地址
						r: 10,
						w: 300,
						h: 480,
						p: 20, // 名片内边距padding
					},
					mainImg: {
						// 背景图
						url: config.ossHost + '2025/01/10/0091f740b8de473cb40e2dfc131edabf.png', // 图片地址
						r: 10, // 圆角半径
						w: 100, // 宽度
						h: 100, // 高度
						x: 180,
						y: 100,
					},

				},
				isChecked: false,
				doctorId: null,
				doctorTeamId: 0,
				doctorInfo: [],
			};
		},
		onLoad(options) {
			// 这里的图是从前面页面传递,之后优化可以用这个
			// this.url = options.photoUrl || config.ossHost + '2025/01/15/2854be0fe4624c4f812d0357aaaf5659.png';
			this.url =  config.ossHost + '2025/01/15/2854be0fe4624c4f812d0357aaaf5659.png';
			console.log(this.photoUrl,"111111");
			this.score = options.score;
			this.resultTitle = options.resultTitle;
			this.getHint = options.getHint;

		},
		methods: {
			goBack() {
				uni.switchTab({
					url: '/pages/index/index' // 目标 TabBar 页面路径
				});

			},

			//查看详情
			viewDetails() {

				uni.navigateTo({
					url: `/outpatient/answerOne/index?index=1`
				});
			},
			// getHint() {
			// 	// 根据父组件传递的 score 进行过滤
			// 	const filtered = this.result.filter(item => parseInt(item.score) >= this.score);

			// 	return filtered.length > 0 ? filtered[0].hint : '暂无提示信息';
			// },

			// 生成名片
			onSaveCard() {

				this.$refs.CreatePoster.posterShow();
			},
			previewImage(base64) {
				// 预览图片
				uni.previewImage({
					urls: [base64],
				});
			},


			detail(type) {
				console.log("type:", type);
				this.$router.push({
					path: `/my/${type}`,
				});
			},


		},
	};
</script>

<style lang="less" scoped>
	.share {
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.modal-block {
			width: 702rpx;
			margin: auto;
			height: 980rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding-top: 238rpx;

			.hint {
				width: 540rpx;
				margin: auto;
				text-align: center;
				font-size: 24rpx;
				color: #805D33;
				line-height: 40rpx;
				margin-top: 184rpx;

			}

			.box {
				width: 618rpx;
				margin: auto;



				.box-top {
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;

					.result {

						text-align: center;
						font-weight: bold;
						font-size: 56rpx;
						color: #805D33;
						margin-top: 112rpx;

					}

					.mark {
						font-family: Alibaba Health Font 2 CN, Alibaba Health Font 20 CN;
						font-weight: 500;
						font-size: 96rpx;
						line-height: 113rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin-top: 20rpx;

					}

					.synthesis {
						font-weight: 500;
						font-size: 32rpx;
						color: #CCA566
					}

					.exceed {
						font-size: 24rpx;
						color: #808080;
						margin-top: 20rpx;
					}

					.btn-box {
						display: flex;
						justify-content: center;
						margin-top: 70rpx;


						.btn-qu {
							height: 70rpx;
							line-height: 70rpx;
							width: 264rpx;
							background: #CCA566;
							border-radius: 48rpx 48rpx 48rpx 48rpx;

							text {
								color: #fff;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}

	.btn-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 32rpx;

		view {
			width: 344rpx;
			height: 82rpx;
			background: #FFFFFF;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			border: 1rpx solid #CCA566;
			line-height: 82rpx;
			text-align: center;
			font-size: 32rpx;
			color: #CCA566;

		}

		.btn {
			margin-left: 16rpx;
			position: relative;

			view {
				color: #fff;
				background: #CCA566;

			}

			button {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 344rpx;
				height: 82rpx;
			}
		}
	}

	.bg {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		padding-top: 65rpx;


		.title-img {
			width: 100rpx;
		}

		text {
			display: inline-block;

			color: #1a1a1a;
			font-size: 32rpx;
			font-weight: bold;
		}

		view {
			width: 100rpx;
		}
	}

	.bg-color {
		// background: #fff;
	}
</style>